<script lang="tsx">
import Vue from 'vue'
import { mapState, mapMutations } from 'vuex'
import { Component, Watch } from 'vue-property-decorator'

@Component({
    computed: {
        ...mapState(process.env.APP_SCOPE_NAME, ['pageTitle', 'headerStatus'])
    },
    methods: {
        ...mapMutations(process.env.APP_SCOPE_NAME, ['setPageTitle', 'toggleHeader'])
    }
})
export default class Layout extends Vue {
    // 若不需要显示header的页面，可将页面路由或者一个正则表达式添加到下方数组，如 '/example'
    public notShowHeader: (string | RegExp)[] = []

    @Watch('$route', { immediate: true })

    resetHeader (to: MgRoute) {
        if (this.notShowHeader.some(v => v instanceof RegExp ? v.test(to.path) : v === to.path)) {
            this.toggleHeader(false)
            return
        }
        this.toggleHeader(true)
    }

    created () {
        // typeof window !== 'undefined' && (window.onbeforeunload = () => {
        //     sessionStorage.setItem('state', JSON.stringify(this.$store.state))
        // })
    }

    render (): JSX.Element {
        return (
            <q-layout view="HHH lpr fff">
                {
                    this.headerStatus
                        ? (
                            <q-layout-header>
                                <mg-toolbar title={this.pageTitle} onLeft-click={() => this.$router.push('/')}>
                                    <template slot="right">
                                        {
                                            (this.$route.path !== '/config')
                                                ? (
                                                    <q-btn on-click={() => this.$router.push('/config')}>配置</q-btn>
                                                )
                                                : ''
                                        }
                                    </template>
                                </mg-toolbar>
                            </q-layout-header>
                        )
                        : ''
                }
                <q-page-container>
                    <router-view></router-view>
                </q-page-container>
            </q-layout>
        )
    }
}
</script>

<style lang="stylus" scoped>
@import '~quasar-variables'

.content
    margin-top 100px
    font-size 24px
    color $tertiary
</style>
